<template>
	<div>
		<mt-header title="编辑信息">
		  <router-link to="/four" slot="left">
		    <mt-button icon="back"></mt-button>
		  </router-link>
		</mt-header>
		
		<div class="boy_by">
			<!-- 修改头型 -->
			<div class="xgtx">
				<img src="../img/tx.png" alt="">
				<p>点击更换头像</p>
				<div></div>
			</div>
			<!-- 基本信息 -->
			<ul>
				<li style="text-align: left;" class="aa" @click="xgmc">
					<span class='a'>修改名字</span>
					<span class='a1'>{{name}}</span>
					<img src="../img/jiesuanxuanz.png" alt="" class="a2">
				</li>
				<li style="text-align: left;" class="bb" @click="xb">
					<span class='b'>性别</span>
					<span class='b1'>{{xbb2}}</span>
					<img src="../img/jiesuanxuanz.png" alt="" class="b2">
				</li>
				<li style="text-align: left;" class="cc" @click='czd'>
					<span class='c'>常驻地</span>
					<span class='c1'>{{czd1}}</span>
					<img src="../img/jiesuanxuanz.png" alt="" class="c2">
				</li>
				<li style="text-align: left;" class="dd" @click="sr">
					<span class='d'>生日</span>
					<span class='d1'>{{sr1}}</span>
					<img src="../img/jiesuanxuanz.png" alt="" class="d2">
				</li>
				<li style="text-align: left;" class="ee" @click="jl">
					<span class='e'>个人简介</span>
					<span class='e1'>{{jl1}}</span>
					<img src="../img/jiesuanxuanz.png" alt="" class="e2">
				</li>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
				<br>
			</ul>
		</div>
		
		
		
		<mt-actionsheet
		v-show='bu'
		  :actions="actions"
		  v-model="sheetVisible">
		</mt-actionsheet>
		
		
		
		<navbar></navbar>
	</div>
</template>

<script>
	import { MessageBox } from 'mint-ui';
	import { Actionsheet } from 'mint-ui';
	import navbar from '../navbar.vue'
	export default{
		components: {
		 navbar
		},
		data() {
			return{
				shengr:'2000-01-01',
				bu:false,
				actions:[{name:'男',method:this.xbb },{name:'女',method:this.xbb1}],
				sheetVisible:false,
				name:'颜',
				xbb2:'女',
				czd1:'北京',
				sr1:'2000-01-01',
				jl1:'未填写'
				
			}
		},
		methods:{
			
			xgmc(){
				MessageBox.prompt('请输入你要修改的名字').then(({ value, action }) => {
				// console.log(value)
				this.name = value
				}).catch(()=>{
					MessageBox.alert('已取消');
				}) ;
			},
			xb(){
				
				// console.log(this.actions)
				// console.log(val)
				this.bu=true
				this.sheetVisible = true
			},
			xbb(){
				this.xbb2 = "男"
				// console.log(this.xbb)
			},
			xbb1(){
				this.xbb2 = "女"
			},
			czd(){
				MessageBox.prompt('请输入地址').then(({ value, action }) => {
				// console.log(value)
				this.czd1 = value
				}).catch(()=>{
					MessageBox.alert('已取消');
				}) ;
			},
			sr(){
				MessageBox.prompt('请输入生日').then(({ value, action }) => {
				// console.log(value)
				this.sr1 = value
				}).catch(()=>{
					MessageBox.alert('已取消');
				}) ;
			},
			jl(){
				MessageBox.prompt('请输入简介').then(({ value, action }) => {
				// console.log(value)
				this.jl1 = value
				}).catch(()=>{
					MessageBox.alert('已取消');
				}) ;
			}
			
			
			
		}
		
	}
</script>

<style lang="less" scoped>
	.mint-header{
		background-color: #fff;
		color: #000;
	}
	.boy_by{
		margin-top: 30px;
		width: 92%;
		height: 70%;
		margin-left: 4%;
		background: #EFF0F5;
		.xgtx{
			img{
				margin-top: 10px;
			}
			p{
				color:#A7A7AB ;
				font-size: 10px;
				
			}
			div{
				margin-top: 5px;
				border-bottom: 2px solid #A7A7AB;
				height: 4px;
			}
		}
		ul{
			.aa{
				position: relative;
				margin-top: 30px;
				.a{
					margin: 25px;
					margin-top: 10px;
					color: #A7A7AB;
					font-size: 15px;
				}
				.a1{
					margin-left: 30px;
					margin-top: 10px;
				}
				.a2{
					position: absolute;
					left: 89%;
				}
			}
			.bb{
				position: relative;
				margin-top: 30px;
				.b{
					margin: 25px;
					margin-top: 10px;
					color: #A7A7AB;
					font-size: 15px;
				}
				.b1{
					margin-left: 60px;
					margin-top: 10px;
				}
				.b2{
					position: absolute;
					left: 89%;
				}
			}
			.cc{
				position: relative;
				margin-top: 30px;
				.c{
					margin: 25px;
					margin-top: 10px;
					color: #A7A7AB;
					font-size: 15px;
				}
				.c1{
					margin-left: 40px;
					margin-top: 10px;
				}
				.c2{
					position: absolute;
					left: 89%;
				}
			}
			.dd{
				position: relative;
				margin-top: 30px;
				.d{
					margin: 25px;
					margin-top: 10px;
					color: #A7A7AB;
					font-size: 15px;
				}
				.d1{
					margin-left: 40px;
					margin-top: 10px;
				}
				.d2{
					position: absolute;
					left: 89%;
				}
			}
			.ee{
				position: relative;
				margin-top: 30px;
				.e{
					margin: 25px;
					margin-top: 10px;
					color: #A7A7AB;
					font-size: 15px;
				}
				.e1{
					margin-left: 40px;
					margin-top: 10px;
				}
				.e2{
					position: absolute;
					left: 89%;
				}
			}
		}
	}
</style>
